<script setup>
import { getProdOutputValueOfLine } from '@/api/visual/productionBoard'
import { fontSize } from '@/utils/globalMethod.js'

const key = ref(1)
const psChartRef = ref()
const keyResize = () => {
  nextTick(() => {
    setTimeout(() => {
      key.value++
    }, 100)
  })
}

const tableData = ref([])

const loadData = async () => {
  const { data } = await getProdOutputValueOfLine()

  tableData.value = data.map(item => {
    item.show = true
    return item
  })
}

const option = computed(() => {
  const active = tableData.value.find(item => item.show)

  if (!active) return {}
  return {
    title: {
      text: `${active.label}每月产值趋势`,
      top: '2%',
      left: '1%',
      textStyle: {
        color: '#fff',
        fontSize: fontSize(0.16)
      }
    },
    legend: {
      top: '5%',
      right: '5%',
      textStyle: {
        color: '#ccc1c1'
      }
    },
    xAxis: {
      type: 'category',
      data: active.dates,
      axisLabel: {
        color: '#ccc1c1'
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: '#2b2c33'
        }
      },
      axisLabel: {
        color: '#ccc1c1'
      }
    },
    series: [
      {
        name: '产值',
        data: active.datas,
        type: 'bar',
        barMaxWidth: 60, // 最大宽度
        itemStyle: {
          color: '#409eff'
        }
      },
      {
        name: '产值趋势',
        data: active.datas,
        type: 'line',
        smooth: true,
        label: {
          show: true,
          distance: 10,
          position: 'top',
          color: '#fff'
        },
        itemStyle: {
          color: '#67c23a'
        }
      }
    ]
  }
})

watch(
  () => option.value,
  () => {
    nextTick(() => {
      psChartRef.value && psChartRef.value.updateChartOption(option.value)
    })
  },
  {
    deep: true
  }
)

onMounted(loadData)
onMounted(() => {
  setTimeout(() => {
    key.value++
  }, 200)

  setInterval(() => {
    const index = tableData.value.findIndex(item => item.show)
    tableData.value.map(item => (item.show = false))
    const nextIndex = index + 1 === tableData.value.length ? 0 : index + 1
    tableData.value[nextIndex].show = true
  }, 7000)

  window.addEventListener('resize', keyResize)
})

onUnmounted(() => {
  clearInterval(timer.value)

  window.removeEventListener('resize', keyResize)
})
</script>

<template>
  <div class="ps_w_h_100">
    <dv-border-box10 :key="key">
      <div class="ab">
        <ps-chart2 :option="option" :autoSet="false" ref="psChartRef"></ps-chart2>
        <!-- <div class="ab-item" v-for="(item, index) in tableData" :key="index">
          <Transition name="slide-fade">
            <div class="ps_w_h_100">
              <ps-chart2 :option="option" :autoSet="false" ref="psChartRef"></ps-chart2>
            </div>
          </Transition>
        </div> -->
      </div>
    </dv-border-box10>
  </div>
</template>

<style scoped lang="scss">
:deep(.border-box-content) {
  padding: 10px 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ab {
  width: 100%;
  height: 100%;
  color: #fff;
  position: relative;

  &-item {
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 2s ease-out;
}

.slide-fade-enter-from {
  transform: translateY(300px);
}

.slide-fade-leave-to {
  transform: translateY(-300px);
}
</style>
